<template>
  <div class="mapping">
    <img class="mapping-pic" src="./images/default_pic.png" alt="" />
    <div class="mapping-text">
      暂无数据
      <span class="mapping-text-btn" @click="jump">
        {{ mappingStatus == 1 ? '立即进行测绘' : '立即配置' }}
        <i class="vulfont vul-turn-right"></i>
      </span>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      width="30%"
      top="30vh"
      custom-class="mapping-confirm"
    >
      <div slot="title" class="dialog-title">
        <i class="el-icon-info icons"></i>
        测绘确认
      </div>
      <div class="dialog-content">
        <span>确认开始进行暴露面、攻击面的测绘吗？</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="dark-btn" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          type="primary"
          :disabled="false"
          @click="submitMapping"
          >立即开始</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {defineProps,ref} from 'vue';
import { useRouter } from 'vue-router';
import {useStore} from 'vuex';
import {ElMessage} from 'element-plus';
const router = useRouter();
const store=useStore();
const props = defineProps({  
  mappingStatus: {  
    type: Array as any,  
    default: '' // 如果需要默认值  
  }  
}); 
const dialogVisible=ref(false);
const canMapping=ref(false);
const jump=()=> {
  if (typeof props.mappingStatus === 'number' && props.mappingStatus === 0) {  
    toConfig();  
  } else if (typeof props.mappingStatus === 'number' && props.mappingStatus === 1) {  
    dialogVisible.value = true;  
  }  
    }
   const toConfig=()=> {
      router.push({
        path: '/system/mapping',
      })
    }
    const submitMapping=async()=> {
      const { code, data } = await store.dispatch('expose/startMapping')
      if (code === 0) {
        ElMessage.success('成功！')
        dialogVisible.value = false
        store.commit('expose/SET_MAPPING_STATUS', 2)
        sessionStorage.setItem('mappingStatus', '2')
      }
    }
</script>
<style lang="scss" scoped>
.mapping {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  &-pic {
    margin-top: 240px;
    width: 255px;
    height: 190px;
  }
  &-text {
    margin-top: 30px;
    color: #8590b3;
    &-btn {
      margin-left: 4px;
      color: $-v-color-primary;
      cursor: pointer;
    }
  }
}
</style>

<style lang="scss">
.mapping-confirm {
  color: $-v-color-white;
  background-color: #242731;
  .el-dialog__header,
  .el-dialog__footer {
    background-color: #242731;
  }
  .dialog-title {
    color: $-v-color-white;
    font-size: 16px;
    .icons {
      color: $-v-color-primary;
      font-size: 20px;
      vertical-align: -0.1em;
    }
  }
  .dialog-content {
    color: $-v-color-white;
    font-size: 18px;
    font-weight: 500;
  }

  .dark-btn {
    background-color: #242731;
    border: 1px solid #8590b3;
    color: #8590b3;
    &.is-disabled {
      background-color: #242731;
      border: 1px solid #8590b3;
      color: #8590b3;
    }
    &.is-disabled:hover,
    &.is-disabled:focus {
      background-color: #242731;
      border: 1px solid #8590b3;
      color: #8590b3;
      cursor: not-allowed;
    }
    &:not([disabled]):focus,
    &:not([disabled]):hover {
      background-color: rgba(36, 39, 49, 0.7);
      color: $-v-color-white;
    }
    &:not([disabled]):hover {
      box-shadow: 0 2px 8px 0 rgba(black, 0.1);
    }
    &:not([disabled]):active {
      border: 1px solid #8590b3;
    }
  }
}
</style>
